<template>
  <view class="container">
    <!-- Hero Banner Section - Updated with Official Tourism Content -->
    <view class="content_card">
      <swiper class="carousel-swiper" circular :autoplay="true" :interval="3000" :duration="500"
        @change="onSwiperChange" :indicator-dots="false">
        <!-- Dynamic Swiper Items from officialContent -->
        <swiper-item v-for="(item, index) in officialContent" :key="index" @click="navigateToOfficialDetail(item)">
          <image class="slide-image" :src="item.imageUrl" mode="aspectFill" />
          <view class="slide-gradient">
            <view class="slide-content">
              <text class="slide-title">文旅发布: {{ item.title }}</text>
              <text class="slide-subtitle">{{ item.subtitle }}</text>
            </view>
          </view>
        </swiper-item>
      </swiper>

      <!-- Navigation arrows -->
      <view class="carousel-nav prev" @click="prevSlide">
        <text class="nav-icon">〈</text>
      </view>
      <view class="carousel-nav next" @click="nextSlide">
        <text class="nav-icon">〉</text>
      </view>

      <!-- Custom indicators -->
      <view class="carousel-indicators">
        <view v-for="(_, index) in officialContent" :key="index"
          :class="['indicator-dot', currentSlideIndex === index ? 'active' : '']" @click="goToSlide(index)"></view>
      </view>
    </view>

    <!-- AI话题推荐 Section - Redesigned as text cards with refresh button -->
    <view class="recommended_content_group">
      <view class="content_recommendation_title">
        <view class="title_background_board"></view>
        <text class="section-title">AI话题推荐</text>
        <view class="refresh-button" @click="refreshTopics">
          <text class="refresh-text">换一换</text>
          <text :class="['refresh-icon', isRefreshing ? 'refresh-rotating' : '']">🔄</text>
        </view>
      </view>
      <view class="topic_cards_container">
        <view v-for="(topic, index) in displayedTopics" :key="index" class="topic_card_item"
          @click="useQuestion(topic.question)">
          <view class="topic_card_content">
            <text class="topic_card_hashtag">{{ topic.title }}</text>
            <text class="topic_card_question">{{ topic.question }}</text>
          </view>
          <view class="topic_card_footer">
            <text class="topic_card_info">{{ topic.hotCount }}人在讨论</text>
            <view class="topic_card_arrow">〉</view>
          </view>
        </view>
      </view>
    </view>

    <!-- Question Area -->
    <view class="conversational_intelligent_question_area">
      <image class="faq_icon" @click="gotoQiLuYiHao()"
        src="@/static/images/qilu.png" />
      <view class="question-buttons">
        <text class="question-button" @click="useQuestion('必玩景点清单？')">必玩景点清单？</text>
        <text class="question-button" @click="useQuestion('本地人推荐路线?')">本地人推荐路线?</text>
      </view>
      <text class="question-header">不知道来莒县玩什么？</text>
      <text class="question-subheader">就问问聪明的小莒！</text>

      <!-- Input Area -->
      <view class="input_group" @click="startVoiceRecord">
        <view class="input_container">
          <text class="input-placeholder">你可以说：莒县有什么特色小吃？</text>
          <view class="input-cursor"></view>
        </view>
        <view class="voice_input_button">
          <uni-icons type="paperplane" size="24" color="#fff"></uni-icons>
        </view>
      </view>
    </view>

    <!-- Theme Selection Modal - Added from daka/index.vue -->
    <view class="modal-overlay" v-if="themeModalVisible" @click="closeThemeModal">
      <view class="theme-modal" @click.stop>
        <view class="modal-header">
          <text class="modal-title">选择您感兴趣的主题</text>
        </view>
        <view class="modal-description">
          <text>为了给您推荐更精准的内容，请选择您感兴趣的主题</text>
        </view>
        <view class="theme-grid">
          <view v-for="(theme, index) in themeOptions" :key="index" class="theme-option"
            :class="{ 'selected': selectedThemes.includes(theme.label) }" @click="toggleTheme(theme.label)">
            <view class="theme-icon">
              <text>{{ theme.icon }}</text>
            </view>
            <text class="theme-label">{{ theme.label }}</text>
          </view>
        </view>
        <button class="explore-button" @click="saveThemePreferences">
          <text>开始探索</text>
        </button>
      </view>
    </view>

    <!-- Login Modal -->
    <view class="modal-overlay" v-if="showLoginModal" @click="closeLoginModal">
      <view class="login-modal" @click.stop>
        <view class="modal-header">
          <text class="modal-title">请登录</text>
        </view>
        <view class="modal-description">
          <text>保存个人偏好设置需要登录账号</text>
        </view>
        <button class="login-button" @click="handleLogin">
          <text>微信一键登录</text>
        </button>
        <button class="cancel-button" @click="closeLoginModal">
          <text>暂不登录</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useAuthStore } from '@/stores/auth'; // Import the auth store

// Get the authentication store
const authStore = useAuthStore();

// 莒县官方旅游交通信息数据
const officialContent = ref([
  {
    id: 'jusu-tourism-1',
    title: '莒县文化旅游节',
    subtitle: '传统民俗体验，特色文艺演出，尽在金秋文化旅游节',
    imageUrl: 'https://images.unsplash.com/photo-1533669955142-6a73332af4db?auto=format&fit=crop&q=80&w=1920',
    content: '莒县文化旅游节将于10月1日至7日在莒州古城举行，活动包括传统民俗展演、非遗文化展示、特色文艺演出等内容，诚邀各地游客前来参观体验。',
    type: 'event'
  },
  {
    id: 'jusu-transport-1',
    title: '莒县交通出行指南',
    subtitle: '最新公交线路、班次时刻表及景区直达服务',
    imageUrl: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=1920',
    content: '莒县公交线路已全面升级，新增5条旅游专线连接主要景点，班次密集，方便游客出行。景区直达班车每30分钟一班，覆盖所有4A级以上景区。',
    type: 'transport'
  },
  {
    id: 'jusu-tour-1',
    title: '莒国故城考古发现',
    subtitle: '春秋时期莒国都城遗址出土珍贵文物',
    imageUrl: 'https://images.unsplash.com/photo-1501555088652-021faa106b9b?auto=format&fit=crop&q=80&w=1920',
    content: '考古学家近日在莒县莒国故城遗址发现大量春秋时期文物，包括精美青铜器、玉器等，展现了2500年前莒国的繁荣景象。相关文物正在莒县博物馆展出。',
    type: 'culture'
  }
]);

// 推荐内容数据
const recommendations = ref([
  {
    id: 1,
    title: '春秋莒国探秘',
    description: '穿越时空，探索春秋时期莒国的历史遗迹与文化故事',
    type: 'history',
    date: '2023/5/16',
    image: 'https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58662705329/e658/435c/b827/758198ff46a0edc23d8cb43c191463d4.jpg'
  },
  {
    id: 2,
    title: '舌尖上的莒县',
    description: '品味地道美食，感受莒县独特的饮食文化',
    type: 'food',
    date: '2023/6/22',
    image: 'https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58662704756/2469/c96d/9775/0ff575354b26631d8f82cca4346e9204.jpg'
  },
  {
    id: 3,
    title: '自然山水徒步',
    description: '探索莒县秀美山水，感受大自然的壮观与宁静',
    type: 'nature',
    date: '2023/7/14',
    image: 'https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58662703950/e6a4/d6f2/6851/65ed570b023054addc7798d44fd3b13f.jpg'
  }
]);

// Theme selection functionality moved from daka/index.vue
const themeModalVisible = ref(false);
const selectedThemes = ref([]);
const hasSetPreferences = ref(false);
const showLoginModal = ref(false); // Controls display of login modal

const themeOptions = ref([
  { icon: '⏱️', label: '历史文化' },
  { icon: '🍽️', label: '美食品鉴' },
  { icon: '🏔️', label: '自然风光' },
  { icon: '📷', label: '摄影' },
  { icon: '🎭', label: '民俗艺术' },
  { icon: '🎵', label: '传统音乐' },
]);

// Check if the user has set preferences before
onMounted(() => {
  checkUserPreferences();
});

function checkUserPreferences() {
  const preferences = uni.getStorageSync('user_theme_preferences');
  if (preferences) {
    hasSetPreferences.value = true;
    selectedThemes.value = JSON.parse(preferences);
    // User already has preferences, don't show modal
  } else {
    // First time user, show theme selection modal
    themeModalVisible.value = true;
  }
}

function closeThemeModal() {
  themeModalVisible.value = false;
}

function closeLoginModal() {
  showLoginModal.value = false;
}

function toggleTheme(themeLabel) {
  if (selectedThemes.value.includes(themeLabel)) {
    selectedThemes.value = selectedThemes.value.filter(t => t !== themeLabel);
  } else {
    selectedThemes.value.push(themeLabel);
  }
}

// Save theme preferences to backend API
function saveUserPreferencesToBackend(themes) {
  // Convert array of themes to comma-separated string
  const themeString = themes.join(',');
  
  // Show loading indicator
  uni.showLoading({
    title: '保存中...',
    mask: true
  });
  
  // Call backend API to save preferences
  uni.request({
    url: 'https://tushuoit.com/api/ju/users/me/profiles',
    method: 'POST',
    header: {
      'Content-Type': 'application/json',
      'Authorization': authStore.authHeader // Use the auth header from store
    },
    data: {
      category_type: 'theme',
      category_value: themeString
    },
    success: (res) => {
      console.log('Preferences saved to backend:', res.data);
      uni.hideLoading();
      uni.showToast({
        title: '偏好已保存',
        icon: 'success',
        duration: 2000
      });
    },
    fail: (err) => {
      console.error('Failed to save preferences to backend:', err);
      uni.hideLoading();
      // Still save locally even if backend fails
      uni.showToast({
        title: '已本地保存，网络同步失败',
        icon: 'none',
        duration: 2000
      });
    }
  });
}

// Keep this version with the login check
function saveThemePreferences() {
  if (selectedThemes.value.length === 0) {
    uni.showToast({
      title: '请至少选择一个主题',
      icon: 'none',
      duration: 2000
    });
    return;
  }
  
  // Check if user is logged in
  if (!authStore.isLoggedIn) {
    // Show login modal if not logged in
    showLoginModal.value = true;
    return;
  }

  // Continue with saving preferences (user is logged in)
  // Save preferences locally
  uni.setStorageSync('user_theme_preferences', JSON.stringify(selectedThemes.value));
  hasSetPreferences.value = true;
  
  // Save to backend API
  saveUserPreferencesToBackend(selectedThemes.value);

  // Close the modal
  themeModalVisible.value = false;

  // Optionally refresh recommendations based on selected themes
  refreshRecommendations();
}

// 处理登录 - 使用 authStore
function handleLogin() {
  showLoginModal.value = false;
  uni.showLoading({
    title: '登录中...'
  });

  uni.login({
    provider: 'weixin',
    success: (loginRes) => {
      if (loginRes.code) {
        const accountInfo = uni.getAccountInfoSync();
        console.log(accountInfo.miniProgram.appId); // 小程序 appId
        // 只发送code到后端换取token
        uni.request({
          url: 'https://tushuoit.com/api/ju/auth/login/wechat',
          method: 'POST',
          data: {
            code: loginRes.code,
            appId: accountInfo.miniProgram.appId
          },
          success: (res) => {
            if (res.data && res.data.access_token) {
              // 使用 Pinia store 更新认证状态
              authStore.setAuthData({
                access_token: res.data.access_token,
                token_type: res.data.token_type || 'bearer',
                open_id: res.data.open_id || '',
                union_id: res.data.union_id || ''
              });

              // 后端应该返回用户信息
              if (res.data.userInfo) {
                authStore.setUserInfo(res.data.userInfo);
              } else {
                // 创建基本用户信息
                const basicUserInfo = {
                  avatarUrl: '/static/default-avatar.png',
                  nickName: '微信用户',
                  openId: res.data.open_id
                };
                authStore.setUserInfo(basicUserInfo);
              }

              uni.showToast({
                title: '登录成功',
                icon: 'success'
              });
              
              // After successful login, proceed with saving theme preferences
              setTimeout(() => {
                saveThemePreferences();
              }, 500);
              
            } else {
              uni.showToast({
                title: '登录失败，请重试',
                icon: 'none'
              });
            }
          },
          fail: (err) => {
            console.error('登录请求失败', err);
            uni.showToast({
              title: '网络错误，请重试',
              icon: 'none'
            });
          },
          complete: () => {
            uni.hideLoading();
          }
        });
      } else {
        uni.hideLoading();
        uni.showToast({
          title: '获取授权失败',
          icon: 'none'
        });
      }
    },
    fail: () => {
      uni.hideLoading();
      uni.showToast({
        title: '登录失败',
        icon: 'none'
      });
    }
  });
}

function refreshRecommendations() {
  // Here you would typically call an API to get personalized recommendations
  // For now, we'll just simulate it with a randomized order
  recommendations.value = [...recommendations.value].sort(() => Math.random() - 0.5);
}

// 跳转到详情页
function navigateToDetail(item) {
  uni.navigateTo({
    url: `/pages/zhixun/detail?id=${item.id}&type=${item.type}`
  });
}

// 跳转到官方发布的信息详情页
function navigateToOfficialDetail(item) {
  uni.navigateTo({
    url: `/pages/zhixun/official-detail?id=${item.id}&type=${item.type}`
  });
}

// 跳转到导航路径
function navigateTo(path) {
  uni.switchTab({
    url: path
  });
}

// 使用问题跳转到智能助手页面
function useQuestion(question) {
  uni.navigateTo({
    url: `/pages/zhixun/chat?question=${encodeURIComponent(question)}`
  });
}

// 开始语音录入
function startVoiceRecord() {
  uni.navigateTo({
    url: '/pages/zhixun/chat?voiceInput=true'
  });
}

// 跳转齐鲁一号
function gotoQiLuYiHao() { 
  uni.navigateTo({
    url: `/pages/qiluyihao/index`
  });
}

// Carousel state and methods
const currentSlideIndex = ref(0);
let swiperInstance = null;

function onSwiperChange(event) {
  currentSlideIndex.value = event.detail.current;
}

function prevSlide() {
  const swiper = uni.createSelectorQuery().select('.carousel-swiper').node();
  if (swiper && swiper.value) {
    currentSlideIndex.value = (currentSlideIndex.value - 1 + officialContent.value.length) % officialContent.value.length;
    swiper.value.slideTo(currentSlideIndex.value);
  }
}

function nextSlide() {
  const swiper = uni.createSelectorQuery().select('.carousel-swiper').node();
  if (swiper && swiper.value) {
    currentSlideIndex.value = (currentSlideIndex.value + 1) % officialContent.value.length;
    swiper.value.slideTo(currentSlideIndex.value);
  }
}

function goToSlide(index) {
  const swiper = uni.createSelectorQuery().select('.carousel-swiper').node();
  if (swiper && swiper.value) {
    currentSlideIndex.value = index;
    swiper.value.slideTo(index);
  }
}

// AI话题推荐数据
const allTopics = ref([
  {
    title: '🏺 神话传说',
    question: '莒县有哪些流传已久的神话故事？',
    hotCount: '2.4k',
    type: 'culture'
  },
  {
    title: '🧳 2日游攻略',
    question: '莒县两日游如何规划行程最合理？',
    hotCount: '5.8k',
    type: 'travel'
  },
  {
    title: '🏮 红色文化',
    question: '莒县的革命历史和红色文化遗址有哪些？',
    hotCount: '1.9k',
    type: 'history'
  },
  {
    title: '🍜 特色美食',
    question: '莒县最值得尝试的特色美食有哪些？',
    hotCount: '8.2k',
    type: 'food'
  },
  {
    title: '🎭 节庆活动',
    question: '莒县近期有哪些热门节庆或文化活动？',
    hotCount: '3.6k',
    type: 'event'
  },
  {
    title: '🏛️ 人文古迹',
    question: '莒县最有历史价值的古迹和文物有哪些？',
    hotCount: '4.1k',
    type: 'culture'
  },
  {
    title: '🌄 自然风景',
    question: '莒县有哪些值得一去的自然景观？',
    hotCount: '6.7k',
    type: 'nature'
  },
  {
    title: '👨‍👩‍👧‍👦 亲子游玩',
    question: '带孩子去莒县，有什么适合亲子互动的地方？',
    hotCount: '4.5k',
    type: 'travel'
  },
  {
    title: '🎨 文化体验',
    question: '莒县有什么特色的文化体验活动？',
    hotCount: '2.8k',
    type: 'culture'
  },
  {
    title: '📸 摄影打卡',
    question: '莒县最适合拍照的景点有哪些？',
    hotCount: '7.3k',
    type: 'travel'
  }
]);

// 当前显示的话题（随机从全部话题中选择4个）
const displayedTopics = ref([]);
const isRefreshing = ref(false);

// 初始化话题 - 使用本地数据
function initTopics() {
  const shuffled = [...allTopics.value].sort(() => 0.5 - Math.random());
  displayedTopics.value = shuffled.slice(0, 4);
}

// 刷新话题推荐 - 使用API
function refreshTopics() {
  if (isRefreshing.value) return; // 防止重复点击
  isRefreshing.value = true;

  // 显示更新提示
  uni.showToast({
    title: '正在更新AI话题...',
    icon: 'none',
    duration: 1000
  });

  // Call the API to get dynamic topic recommendations
  uni.request({
    url: 'https://tushuoit.com/api/ju/deepseek/chat',
    method: 'POST',
    data: {
      apiKey: "juxianwenlv",
      model: 'deepseek-r1-distill-qwen-32b',
      prompt: `请为游客提供4个关于莒县旅游的热门话题，每个话题包含标题和相关问题。标题前面添加一个贴合主题的emoji，小红书风格。返回JSON格式，包含title（带emoji的标题,简短），question（问题），hotCount（热度，随机生成1k-9k范围的数字加k后缀），type（类型：culture、travel、food、history、nature、event中选一个）字段。不要有任何前导说明或多余注释。
            
            # 输出示例
    [{
        title: '🌄 自然风景',
        question: '莒县有哪些值得一去的自然景观？',
        hotCount: '6.7k',
        type: 'nature'
    },
    {
        title: '👨‍👩‍👧‍👦 亲子游玩',
        question: '带孩子去莒县，有什么适合亲子互动的地方？',
        hotCount: '4.5k',
        type: 'travel'
    },
    {
        title: '🎨 文化体验',
        question: '莒县有什么特色的文化体验活动？',
        hotCount: '2.8k',
        type: 'culture'
    },
    {
        title: '📸 摄影打卡',
        question: '莒县最适合拍照的景点有哪些？',
        hotCount: '7.3k',
        type: 'travel'
    }]
            `
    },
    success: (res) => {
      console.log('API response:', res.data);
      try {
        // Parse the response based on the specific Deepseek API structure
        if (res.data && res.data.choices && res.data.choices.length > 0) {
          const content = res.data.choices[0].message.content;

          // Extract JSON from the content (may contain markdown code blocks)
          const jsonMatch = content.match(/```json\s*([\s\S]*?)\s*```/) ||
            content.match(/\[\s*\{[\s\S]*\}\s*\]/);

          if (jsonMatch) {
            // Use the extracted JSON string
            const jsonStr = jsonMatch[1] || jsonMatch[0];
            const parsedData = JSON.parse(jsonStr);

            if (Array.isArray(parsedData)) {
              displayedTopics.value = parsedData;
              console.log('Successfully parsed topics:', parsedData);
            }
          } else {
            throw new Error('Could not extract JSON from API response');
          }
        } else {
          throw new Error('Unexpected API response format');
        }
      } catch (error) {
        console.error('Failed to parse API response:', error);
        // Fallback to local data
        initTopics();
      }

      // Complete the refresh process
      isRefreshing.value = false;

      uni.showToast({
        title: '已更新AI话题推荐',
        icon: 'none',
        duration: 1500
      });
    },
    fail: (err) => {
      console.error('API request failed:', err);
      // Fallback to local data on API failure
      initTopics();

      // Complete the refresh process
      isRefreshing.value = false;

      uni.showToast({
        title: '已更新AI话题推荐',
        icon: 'none',
        duration: 1500
      });
    }
  });
}

// 初始载入时使用本地数据设置话题
onMounted(() => {
  initTopics();
});
</script>

<style>
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f0e3;
}

/* Updated Banner/Carousel styling */
.content_card {
  position: relative;
  width: 100%;
  height: 240rpx;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 0;
}

.carousel-swiper {
  width: 100%;
  height: 100%;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  display: flex;
  align-items: flex-end;
}

.slide-content {
  padding: 16px;
}

.slide-title {
  font-size: 22px;
  font-weight: bold;
  color: white;
  margin-bottom: 4px;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
  display: block;
}

.slide-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Carousel Navigation */
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 10;
}

.content_card:hover .carousel-nav {
  opacity: 1;
}

.carousel-nav.prev {
  left: 10px;
}

.carousel-nav.next {
  right: 10px;
}

.nav-icon {
  color: white;
  font-size: 16px;
  font-weight: bold;
}

/* Custom indicators */
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

.indicator-dot {
  width: 6px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: all 0.3s;
}

.indicator-dot.active {
  width: 18px;
  border-radius: 3px;
  background-color: white;
}

/* Recommendation section */
.recommended_content_group {
  padding: 0 15px;
  margin-bottom: 20px;
}

.content_recommendation_title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.title_background_board {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background-color: #8b6b4a;
  border-radius: 2px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-left: 10px;
}

.refresh-button {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 15px;
  background-color: rgba(139, 107, 74, 0.1);
}

.refresh-text {
  font-size: 14px;
  color: #8b6b4a;
  margin-right: 5px;
}

.refresh-icon {
  font-size: 14px;
  color: #8b6b4a;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.rotating {
  animation: rotating 0.5s linear;
}

.refresh-rotating {
  animation: rotating 1s linear infinite;
}

/* 话题卡片容器 */
.topic_cards_container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 话题卡片样式 */
.topic_card_item {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 60px;
  border: 1px solid rgba(139, 107, 74, 0.1);
  position: relative;
  overflow: hidden;
}

.topic_card_item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 40%;
  background-color: #8b6b4a;
  border-radius: 2px 0 0 2px;
}

.topic_card_content {
  flex: 1;
}

.topic_card_hashtag {
  font-size: 15px;
  font-weight: bold;
  color: #8b6b4a;
  margin-bottom: 8px;
  display: block;
}

.topic_card_question {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topic_card_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.topic_card_info {
  font-size: 12px;
  color: #999;
}

.topic_card_arrow {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #8b6b4a;
}

.content_cards_container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  margin: 0 -5px;
}

.content_card_item {
  position: relative;
  flex: 0 0 60%;
  margin: 0 5px;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
}

.card_picture_background_1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card_text_container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
}

.card_text_shadow_bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  z-index: -1;
}

.card_title {
  font-size: 16px;
  font-weight: bold;
  color: white;
  margin-bottom: 5px;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
}

.content_type_tag {
  display: inline-flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 3px 8px;
}

.content_type_icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.tag-text {
  font-size: 12px;
  color: white;
}

.slider_progress_bar {
  position: relative;
  height: 2px;
  background-color: rgba(139, 107, 74, 0.2);
  margin-top: 10px;
  border-radius: 1px;
}

.slider_progress_indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 33.33%;
  height: 2px;
  background-color: #8b6b4a;
  border-radius: 1px;
}

/* Question area */
.conversational_intelligent_question_area {
  position: relative;
  padding: 20px 15px;
  background-color: white;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.faq_icon {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.question-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
  margin-bottom: 15px;
}

.question-button {
  padding: 8px 12px;
  background-color: #f0e0d0;
  color: #8b6b4a;
  border-radius: 20px;
  font-size: 14px;
}

.question-header {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.question-subheader {
  text-align: center;
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.input_group {
  display: flex;
  align-items: center;
  border: 1px solid #d9b38c;
  border-radius: 20px;
  padding: 5px;
  margin-top: 20px;
}

.input_container {
  flex: 1;
  position: relative;
  padding: 8px 10px;
}

.input-placeholder {
  color: #999;
  font-size: 14px;
}

.input-cursor {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background-color: #8b6b4a;
  animation: blink 1s infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.voice_input_button {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background-color: #2563eb;
  display: flex;
  justify-content: center;
  align-items: center;
}

.voice-icon {
  width: 20px;
  height: 20px;
}

/* Navigation Bar */
.navigation_bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color: white;
  padding: 10px 0;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}

.nav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

.nav-text {
  font-size: 12px;
  color: #666;
}

.nav-item.active .nav-text {
  color: #8b6b4a;
  font-weight: bold;
}

/* Added Modal Styles from daka/index.vue */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.theme-modal {
  width: 80%;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  position: relative;
}

.modal-header {
  position: relative;
  margin-bottom: 10px;
}

.modal-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: center;
  display: block;
}

.modal-description {
  text-align: center;
  margin-bottom: 15px;
}

.modal-description text {
  font-size: 12px;
  color: #666;
}

.theme-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.theme-option {
  width: 30%;
  margin-bottom: 10px;
  height: 70px;
  background-color: #f8f0e3;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #e8d0b5;
}

.theme-option.selected {
  background-color: #e8d0b5;
  border-color: #8b6b4a;
}

.theme-icon {
  font-size: 20px;
  margin-bottom: 5px;
}

.theme-label {
  font-size: 12px;
  color: #333;
}

.explore-button {
  width: 100%;
  height: 40px;
  background-color: #8b6b4a;
  color: white;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.explore-button text {
  font-size: 14px;
  color: white;
}

/* Login Modal Styles */
.login-modal {
  width: 80%;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  position: relative;
}

.login-button {
  width: 100%;
  height: 40px;
  background-color: #07c160;
  color: white;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  border: none;
}

.cancel-button {
  width: 100%;
  height: 40px;
  background-color: #f0f0f0;
  color: #333;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  border: none;
}

.login-button text,
.cancel-button text {
  font-size: 14px;
  color: white;
}
</style>
